  <template>
  <div class="home">
    <div>
      <div @click="goCity" class="city">{{ city }}</div>

      <van-search @focus="events" v-model="value" placeholder="搜索商品" />

      <!-- <div id="container"></div> -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banerList" :key="item.id">
          <img class="img" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>

      <van-grid clickable column-num="5" class="channel">
        <van-grid-item
          :icon="item.icon_url"
          :text="item.name"
          v-for="item in channelList"
          :key="item.id"
        />
      </van-grid>

      <div class="title">品牌制造商直供</div>
      <ul class="pinpai">
        <li v-for="item in brandlist" :key="item.id">
          <img :src="item.new_pic_url" alt="" width="180px" height="118px" />
          <div class="text">
            <p>{{ item.name }}</p>
            <p>{{ item.floor_price }}元起</p>
          </div>
        </li>
      </ul>
      <div class="newgoods-top">
        <router-link to="/home/newgoods?id=1" tag="div" class="top">
          <p>新品首发</p>

          <p>查看全部</p>
        </router-link>
      </div>

      <ul class="detail">
        <li v-for="item in newGoods" :key="item.id">
          <img :src="item.list_pic_url" alt="" width="140px" height="140px" />
          <p>{{ item.name }}</p>
          <p>{{ item.goods_brief }}</p>
          <p>¥{{ item.retail_price }}</p>
        </li>
      </ul>
      <div class="hot">
        <router-link to="/home/newgoods?id=2" tag="div" class="top">
          <p>人气推荐 好物精选</p>

          <p>查看全部</p>
        </router-link>
      </div>

      <ul class="detail">
        <li v-for="item in hotGoods" :key="item.id">
          <img :src="item.list_pic_url" alt="" width="140px" height="140px" />
          <p>{{ item.name }}</p>
          <p>{{ item.goods_brief }}</p>
          <p>¥{{ item.retail_price }}</p>
          <p class="haowuprice">{{ item.price_info }}</p>
        </li>
      </ul>

      <div class="topicList">
        <div class="topicList-top">
          专题精选
          <span class="icon"></span>
        </div>

        <ul class="list">
          <li v-for="item in topicList" :key="item.id">
            <img :src="item.item_pic_url" alt="" width="286px" height="162px" />
            <div class="btom">
              <div>
                <p>{{ item.title }}</p>
                <p>{{ item.subtitle }}</p>
              </div>

              <div>{{ item.price_info }}元起</div>
            </div>
          </li>
        </ul>
      </div>

      <div class="newCategory">
        <div class="list" v-for="item in newCategoryList" :key="item.id">
          <div class="head">{{ item.name }}好物</div>

          <ul class="sublist" style="display: flex; flex-wrap: wrap">
            <li
              v-for="item1 in item.goodsList"
              :key="item1.id"
              style="width: 180px; height: 214px"
            >
              <img
                :src="item1.list_pic_url"
                width="150px"
                height="150px"
                alt=""
              />
              <p>{{ item1.name }}</p>
              <p class="haowuprice">¥{{ item1.retail_price }}</p>
            </li>
            <div style="width: 180px; height: 214px">
              <p class="haowutitle">{{ item.name }}好物</p>
              <span class="smallicon" style="width: 34px; height: 34px"></span>
            </div>
          </ul>
        </div>
      </div>

      <div class="box2"></div>
    </div>
  </div>
</template>

   <script>
// import axios from "axios";
import { index, detailaction, clearhistoryAction } from "@/api/home/index";
export default {
  data() {
    return {
      value: "",
      city: "",
      banerList: [],
      channelList: [],
      brandlist: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: [],
      // goodsList: [],
    };
  },

  computed: {},
  created() {
    index().then((res) => {
      console.log(res);
      this.banerList = res.data.banner;
      this.channelList = res.data.channel;
      this.brandlist = res.data.brandList;
      this.newGoods = res.data.newGoods;
      this.hotGoods = res.data.hotGoods;
      this.topicList = res.data.topicList;
      this.newCategoryList = res.data.newCategoryList;
      // this.goodsList = res.data.newCategoryList.goodsList;
    });
    detailaction({
      id: 1001000,
    });
  },
  mounted() {
    var _this = this;
    console.log(this.$store.state.currentSelected);
    if (this.$store.state.currentSelected.name) {
      _this.city = this.$store.state.currentSelected.name;
    } else {
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log(result);
            _this.city = result.city;
          }
        });
      });
    }
  },
  methods: {
    goCity() {
      this.$store.commit("uptCity", this.city);
      console.log(this.$route, this.$router);
      this.$router.push("/home/city");
    },
    events() {
      this.$router.push("/home/search");
    },
    // clear() {
    //   clearhistoryAction({
    //     openId: "66",
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
@import "./scss/index.scss";
.city {
  float: left;
  margin-top: 18px;
  font-size: 12px;
  max-width: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 10px;
  width: 60px;
  height: 40px;
}
.van-search {
  width: 70%;
}
#container {
  width: 300px;
  height: 180px;
}
</style>

<style lang='scss'>
.haowuprice {
  text-align: left;
  color: red;
  margin-left: 26px;
}
.haowutitle {
  font-size: 18px;
  margin-top: 60px;
}
.smallicon {
  display: inline-block;
  background: url()
    no-repeat;
  background-size: 100% 100%;
  margin-top: 34px;
  width: 34px;
  height: 34px;
}
</style>


